<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>选择出行需求</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .header{
            background-color: #fff;
            position: relative;
            z-index: 2000;
        }
        .wrapper{
            width: 1200px;
            padding: 0 5px;
            margin: 0 auto;
        }
        .header-cont{
            height: 80px;
            box-sizing: border-box;
        }
        .logo{
            float: left;
            margin: 15px 0 0 0;
        }
        .logo img{
            width: 200px;
            height: 50px;
        }
        .header-right{
            float: right;
            margin: 24px 0 0 0;
            width: 940px;
            height: 40px;
            background: image-set(url("http://localhost:8080/sellticket_war_exploded/forward/img/train.png") 1x,url("http://localhost:8080/sellticket_war_exploded/forward/img/train@2x.png") 2x);
            background-repeat: no-repeat;
            position: relative;
            z-index: 2000;
        }
        .header-search{
            width: 380px;
            float: left;
            margin: 5px 0 5px 90px;
        }
        .header-menu{
            float: right;
            padding-right: 10px;
        }
        .search-bd{
            width: 350px;
            position: relative;
        }
        .search-input{
            width: 100%;
            float: left;
            height: 30px;
            line-height: 20px;
            border: 1px solid #dedede;
            padding: 4px 10px;
            background-color: #fff;
            color: #333;
            outline: none;
            font-size: 14px;
            box-sizing: border-box;
        }
        .search-btn{
            float: left;
            width: 30px;
            color: #FFFFFF;
            height: 30px;
            line-height: 30px;
            background-color: #5696DE;
            border: none;
            text-align: center;
            cursor: pointer;
            outline: none;
        }
        .search-btn img{
            width: 16px;
            height: 16px;
        }
        .header-menu li{
            float: left;
            margin-left: 10px;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            position: relative;
            list-style: none;
            color: #3b99fc;
            font-size: 12px;
        }
        .menu-line{
            color: #acd1f9;
        }
        .menu-login a{
            color: #333;
            text-decoration: none;
            background-color: transparent;
            margin-left: 10px;
        }
        .nav-box{
            height: 40px;
            background-color: #3b99fc;
        }
        .nav{
            width: 1190px;
            margin: 0 auto;
            height: 40px;
            position: relative;
            z-index: 1900;
        }
        .nav li{
            list-style: none;
            width: 145px;
            float: left;
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
        }
        .active{
            background-color: #2676e3;
            color: #fff;
        }
        .banner{
            width: 100%;
            height: 450px;
            position: relative;
            background: url("http://localhost:8080/sellticket_war_exploded/forward/img/banner12.jpg");
        }
        .search-index{
            position: absolute;
            top: 10%;
            left: 50%;
            margin-left: -595px;
            z-index: 100;
            width: 510px;
            height: 350px;
            background: #fff;
        }
        li{
            list-style: none;
            cursor: pointer;
        }
        .search-side{
            float: left;
            width: 100px;
            height: auto;
        }
        .search-side li{
            background: #3b99fc;
            border-bottom: 1px solid #86bffb;
            height: 116px;
            text-align: center;
            line-height: 116px;
            color: white;
            font-size: 16px;
        }
        .search-side-active{
            background: #fff !important;
            color: #3b99fc !important;
            border-left: 4px solid #3b99fc !important;
        }
        .search-main{
            float: left;
            width: 410px;
            height: 350px;
            padding: 32px 25px 0 25px;
            box-sizing: border-box;
        }
        .search-tab-hd{
            height: 34px;
            border-bottom: 2px solid #dedede;
        }
        .search-tab-hd li{
            float: left;
            width: 25%;
            text-align: center;
            position: relative;
            font-size: 14px;
            height: 34px;
            line-height: 34px;
        }
        .search-tab-hd-active{
            color: #3b99fc;
            border-bottom: 2px solid #3b99fc;
        }

        .search-tab-bd{
            display: block;
            margin-top: 30px;
            position: relative;
        }
        .form-item{
            height: 30px;
            margin-top: 16px;
        }
        .form-item label{
            width: 75px;
            text-align: right;
            padding-right: 10px;
            font-size: 14px;
            display: inline-block;
        }
        .form-item select{
            width: 265px;
            height: 30px;
            line-height: 30px;
        }

        .btn{
            display: block;
            border-radius: 6px;
            font-size: 14px;
            background-color: #FF8000;
            color: #fff;
            border: none;
            outline: none;
            height: 30px;
            line-height: 30px;
            margin-top: 30px;
            width: 100%;
            cursor: pointer;
        }
        .service-list{
            height: 136px;
        }
        .service-list li{
            float: left;
            width: 14.2%;
            padding: 35px 0;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
        }
        .service-icon{
            display: block;
            width: 36px;
            height: 36px;
            margin: 0 auto 5px;
            background:url("http://localhost:8080/sellticket_war_exploded/forward/img/service.png") ;
        }
        .icon-s2{
            background-position: 0 -40px;
        }
        .icon-s3{
            background-position: 0 -80px;
        }
        .icon-s4{
            background-position: 0 -120px;
        }
        .icon-s5{
            background-position: 0 -160px;
        }
        .icon-s6{
            background-position: 0 -200px;
        }
        .icon-s6{
            background-position: 0 -240px;
        }
        .icon-s9{
            background-position: 0 -320px;
        }

        .service-lg{
            overflow: hidden;
        }
        .service-lg ul{
            margin-right: -10px;
            height: 165px;
        }
        .service-lg ul li{
            float: left;
            width: 590px;
            height: 160px;
            margin-right: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .service-lg ul li img{
            display: block;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div class="content">
    <div class="header">
        <div class="wrapper">
            <div class="header-cont">
                <h1 class="logo">
                    <img src="http://localhost:8080/sellticket_war_exploded/forward/img/title.png" alt="">
                </h1>
                <div class="header-right">
                    <div class="header-search">
                        <div class="search-bd">
                            <input type="text" class="search-input" placeholder="搜索车票、餐饮、常旅客、相关规定">
                        </div>
                        <a href="javascript:;" class="search-btn">
                            <img src="http://localhost:8080/sellticket_war_exploded/forward/img/search.png" alt="">
                        </a>
                    </div>
                    <ul class="header-menu">
                        <li>无障碍</li>
                        <li class="menu-line">|</li>
                        <li>爱心版</li>
                        <li class="menu-line">|</li>
                        <li>English</li>
                        <li class="menu-line">|</li>
                        <li>我的12306</li>
                        <li class="menu-line">|</li>
                        <c:if test="${resUser == null}">
                            <li class="menu-login">
                                <a href="http://localhost:8080/sellticket_war_exploded/forward/login.jsp">登录</a>
                                <a href="http://localhost:8080/sellticket_war_exploded/forward/signup.jsp">注册</a>
                            </li>
                        </c:if>
                        <c:if test="${resUser != null}">
                            <li class="menu-login">
                                <a href="http://localhost:8080/sellticket_war_exploded/order/getOrderByUser">用户：${resUser.user_name}</a>
                            </li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nav-box">
            <ul class="nav">
                <li class="active">首页</li>
                <li>车票</li>
                <li>团购服务</li>
                <li>会员服务</li>
                <li>站车服务</li>
                <li>商旅服务</li>
                <li>出现指南</li>
                <li>信息查询</li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <div class="search-index">
            <ul class="search-side">
                <li class="search-side-active">车票</li>
                <li>常用查询</li>
                <li>订餐</li>
            </ul>
            <div class="search-main">
                <ul class="search-tab-hd">
                    <li class="search-tab-hd-active">单程</li>
                    <li>往返</li>
                    <li>中转换乘</li>
                    <li>改退签</li>
                </ul>
                <div class="search-tab-bd">
                    <form action="http://localhost:8080/sellticket_war_exploded/ticket/getTicketBySth" method="get">
                        <div class="form-item">
                            <label>出发地</label>
                            <select name="departure_station">
                                <c:forEach var="station" items="${stationList}">
                                    <option value="${station.station_id}">${station.station_name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-item">
                            <label>到达地</label>
                            <select name="terminal_station">
                                <c:forEach var="station" items="${stationList}">
                                    <option value="${station.station_id}">${station.station_name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-item">
                            <label>出发日期</label>
                            <input type="date" name="train_date">
                        </div>
                        <input type="submit" value="查询" id="btn" class="btn">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <ul class="service-list">
            <li>
                <i class="service-icon icon-s2"></i>
                <div>重点旅客预约</div>
            </li>
            <li>
                <i class="service-icon icon-s6"></i>
                <div>遗失物品查找</div>
            </li>
            <li>
                <i class="service-icon icon-s4"></i>
                <div>约车服务</div>
            </li>
            <li>
                <i class="service-icon icon-s5"></i>
                <div>便民拖运</div>
            </li>
            <li>
                <i class="service-icon icon-s3"></i>
                <div>车站引导</div>
            </li>
            <li>
                <i class="service-icon icon-s7"></i>
                <div>车站风采</div>
            </li>
            <li>
                <i class="service-icon icon-s9"></i>
                <div>用户反馈</div>
            </li>
        </ul>
        <div class="service-lg">
            <ul>
                <li>
                    <img src="http://localhost:8080/sellticket_war_exploded/forward/img/abanner01.jpg" alt="">
                </li>
                <li>
                    <img src="http://localhost:8080/sellticket_war_exploded/forward/img/abanner02.jpg" alt="">
                </li>
                <li>
                    <img src="http://localhost:8080/sellticket_war_exploded/forward/img/abanner05.jpg" alt="">
                </li>
                <li>
                    <img src="http://localhost:8080/sellticket_war_exploded/forward/img/abanner06.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
</div>

</div>
</body>
</html>
